<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:core="http://www.contact.core.com/contacts/core/ui"
      xmlns:common="http://www.contact.common.com/contacts/ui"
        >

<ui:component>
    <style type="text/css">
        .a1 A:link {
            text-decoration: none;
            color: #20205e;
        }

        .a1 A:visited {
            text-decoration: none;
            color: #20205e;
        }

        .a1 A:active {
            text-decoration: none; /*color: yellow;*/
        }

        .a1 A:hover {
            text-decoration: none;
            background: #20205e; /*font-style: italic;*/
            color: white;
        }

        .padding0{
            padding:0;
        }
    </style>
    <h:form>
        <core:pictureForView style="width:100%"
                             pictureKey="photoprofile_#{profileSessionBean.information.id}"
                             informationId="#{profileSessionBean.information.id}"/>

        <a4j:outputPanel styleClass="a1" layout="block">
            <h:panelGrid style="width:100%" columns="1">
                <a4j:commandLink value="#{resources.viewPhotosOfMeLabel} (112)"
                                 reRender="leftContentProfilPanel, profileRightCenterPanel"
                                 action="#{profile.preparePhotosTab}">
                    <f:setPropertyActionListener value="profileTabThree"
                                                 target="#{profile.profileTab}"/>
                </a4j:commandLink>
                <rich:separator height="1px" width="100%"/>
                <a4j:commandLink value="#{resources.editMyProfileLabel}"
                                  reRender="profileRightCenterPanel"
                                 action="#{accountBean.proccesProfileSpecificView}">
                                 <f:setPropertyActionListener value="editProfile"
                                             target="#{accountBean.profileSpecificView}"/>
                </a4j:commandLink>
                <rich:separator height="1px" width="100%"/>

            </h:panelGrid>
        </a4j:outputPanel>

        <a4j:outputPanel layout="block" style="height:20px; width:100%"/>

        <!--<rich:panel style="width:100%; overflow:auto;"-->
                    <!--bodyClass="rich-laguna-panel-no-header">-->


            <common:inplaceTextarea id="description" altText="#{resources.writeSomethingsText}" value="#{profileSessionBean.information.description}" jsSave="updateDescription()"/>
            <a4j:jsFunction action="#{profile.updateDescription}" name="updateDescription" ajaxSingle="true"/>

            <!--<style type="text/css">-->
                <!--.inplace{-->
                    <!--height:40px;-->
                    <!--width:100%;-->
                    <!--white-space:normal;-->
                    <!--border: none;-->
                <!--}-->
                <!--.hover {-->
                    <!--text-decoration:underline;-->
                    <!--/*color: #{a4jSkin.generalTextColor};*/-->
                    <!--/*background-color :#{a4jSkin.tipBorderColor};*/-->
                <!--}-->
            <!--</style>-->
            <!--<rich:inplaceInput id="inplaceAbout"-->
                               <!--defaultLabel="Write somethings about yourself"-->
                               <!--selectOnEdit="true"-->
                               <!--inputWidth="100%"-->
                               <!--changedHoverClass="hover" viewHoverClass="hover"-->
                               <!--viewClass="inplace" changedClass="inplace" styleClass="inplace"-->
                               <!--showControls="true"-->
                               <!--layout="block"-->
                               <!--value="#{profileSessionBean.information.description}">-->
                <!--<a4j:support event="onviewactivated" reRender="#{rich:clientId('inplaceAbout')}"/>-->
            <!--</rich:inplaceInput>-->

            <!--<a4j:commandLink rendered="#{empty profileSessionBean.information.description}"-->
                             <!--value="Write somethings about yourself"/>-->
            <!--<h:inputTextarea rendered="#{profileSessionBean.information.description}"-->
                             <!--style="width:100%; overflow:auto;"-->
                             <!--rows="4"-->
                             <!--value="#{profileSessionBean.information.description}"/>-->

        <!--</rich:panel>-->

        <a4j:outputPanel layout="block" style="height:20px; width:100%"/>

        <rich:panel style="width:100%; overflow:auto;"
                    header="#{resources.informationLabel}">
            <h:panelGrid columns="1">
                <h:outputLabel value="#{resources.birthdayLabel}:" style="color:gray;"/>
                <h:outputText value="#{profileSessionBean.information.birthday}">
                    <f:convertDateTime pattern="MMMMM dd, yyyy."/>
                </h:outputText>
            </h:panelGrid>
        </rich:panel>

        <a4j:outputPanel layout="block" style="height:20px; width:100%"/>

        <core:allFriendsBasicViewPanel/>
    </h:form>
</ui:component>


</html>
